<template>
  <div class="rbarchive">
    <div class="query-form">
      <!-- 查询区域 -->
      <el-form ref="form" :inline="true" :model="archive">
        <el-form-item label="报销单ID" prop="rbId">
          <el-input v-model="archive.rbId" placeholder="请输入报销单ID" />
        </el-form-item>
        <el-form-item label="受保人ID" prop="MBR_NO">
          <el-input v-model="archive.MBR_NO" placeholder="请输入受保人ID" />
        </el-form-item>
        <el-form-item label="投保人ID" prop="POHO_NO">
          <el-input v-model="archive.POHO_NO" placeholder="请输入投保人ID" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <!-- 列表区域 -->
      <el-table :data="archiveList">
        <el-table-column width="55" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total || 1"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
export default {
  name: "rbarchive", // name：组件的名称，方便调试和识别。
  setup() {
    // setup：Vue 3 的组合式 API 入口函数，用于编写组件逻辑。
    const { proxy } = getCurrentInstance();
    // 初始化用户表单对象，响应式对象，存储查询表单的数据，初始状态为 1（在职）
    const archive = reactive({
      rbId: "",
      MBR_NO: "",
      POHO_NO: "",
    });
    // 响应式数组，初始化用户列表数据
    const archiveList = ref([]);
    // 响应式对象，初始化分页对象
    const pager = reactive({
      pageNum: 1,
      pageSize: 10,
    });

    // 定义动态表格-格式
    const columns = reactive([
      {
        label: "报销单ID",
        prop: "rbId",
      },
      {
        label: "上传批次ID",
        prop: "upload_id",
      },
      {
        label: "是否诈骗",
        prop: "fraud",
        formatter(row, column, value) {
          return {
            0: "非诈骗",
            1: "诈骗",
          }[value];
        },
      },
      {
        label: "赔付金额",
        prop: "APP_AMT",
        formatter(row, column, value) {
          if(row.fraud === 1){
            return 0;
          }
          else{
            return value;
          }
        },
      },
      {
        label: "受保人ID",
        prop: "MBR_NO",
      },
      {
        label: "投保人ID",
        prop: "POHO_NO",
      },
    ]);
    // 初始化接口调用
    // onMounted：组件挂载后，调用  getMbrList() 方法
    onMounted(() => {
      getArchiveList();
    });
    // 获取归档数据列表
    const getArchiveList = async () => {
      let params = { ...archive, ...pager };
      try {
        const { list, page } = await proxy.$api.getArchiveList(params);
        archiveList.value = list;
        pager.total = page.total;
      } catch (error) {}
    };
    // 查询事件，获取归档数据列表
    const handleQuery = () => {
      getArchiveList();
    };
    // 重置查询表单 通过 proxy.$refs 获取表单引用，并调用 resetFields 方法重置表单。
    const handleReset = (form) => {
      proxy.$refs[form].resetFields();
    };
    // 分页事件处理 当页码改变时，更新 pager.pageNum 为当前页码，并调用 getArchiveList 方法重新获取用户列表。
    const handleCurrentChange = (current) => {
      pager.pageNum = current;
      getArchiveList();
    };

    return {
      archive,
      archiveList,
      columns,
      pager,
      getArchiveList,
      handleQuery,
      handleReset,
      handleCurrentChange,
    };
  },
};
</script>

<style lang="scss">
.rbarchive {
  padding: 20px;
  background-color: #f5f7fa;
  .query-form {
    background-color: #ffffff;
    padding: 22px 20px 0;
    border-radius: 5px;
    .el-select {
      width: 80px;
    }
  }
  .base-table {
    border-radius: 5px 5px 0px 0px;
    background: #ffffff;
    padding: 20px;
    border-bottom: 1px solid #e4e8e8;
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end; /* 靠右对齐 */
    }
  }
}
</style>
